<template>
  <div class="home-s">
    <el-row :gutter="10">
      <el-col class="m-b10" :span="isH?24:14" style="display: none">
        <el-card class="box-card">
          <div class="STH">
            <p>代办事项</p>
            <div>
              <el-button size="small" :icon="ArrowLeft" @click="sthsun--;"></el-button>
              <el-button size="small" :icon="ArrowRight" @click="sthsun++;"></el-button>
            </div>
          </div>
          <div class="STH-view">
            <div class="SV-total">
              <p class="total-title">0</p>
              <p class="fon-s12">代办</p>
              <p class="san"></p>
            </div>
            <div class="SV-details">
              <div class="SVD-d">
                <div class="item-s" :class="isH?'w48':''" v-for="item in countlistData" :key="item.TemplateID">
                  <el-badge  class="item w100">
                    <el-button size="small" class="w100">{{item.TemplateName}}</el-button>
                  </el-badge>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- table右上角完成 -->
      <el-col class="m-b10" :span="isH?24:10" style="height: 193px;display: none">
        <el-card class="box-card type-l1">
          <el-tabs style="height: 153px;" v-model="tasName" class="demo-tabs">
            <el-tab-pane v-for="(item,index) in tasData" :key="index" :label="item.title" :name="'second'+index">
              <ul>
                <li class="list-left" v-for="vat in item.list_data" :key="vat.url" @click="clickPath(vat)">
                  <p>0808-公开-w1公开寻源公告</p>
                  <p>2022-08-09</p>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col class="m-b10"  >
        <el-card class="box-card">
          <el-tabs style="height: 320px;" v-model="activeName" class="demo-tabs">
            <el-tab-pane v-for="(v,k) in task" :label="v" :name="k">
              <el-table :data="wait_list[k]||[]" stripe  size="small" style="width: 100%"  height="320">
                <el-table-column prop="title" label="流程标题" width="280" >
                  <template #default="{row}">
                    <el-button link type="primary" size="small" @click="viewtask(row)">{{ row.title }}</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="node" label="节点" width="120" />
                <el-table-column prop="time" label="创建时间" width="130"  />
                <el-table-column prop="user" label="发起人" />
              </el-table>
            </el-tab-pane>
            </el-tabs>
        </el-card>

      </el-col>
      <el-col class="m-b10"  >
        <el-card class="box-card">
          <el-tabs >
            <el-tab-pane label="消息通知... 更多消息请到消息中心查看">

              <el-row>
                <el-col :span="screenWidth<500?24:6" v-for="(item,index) in messages" :key="index" :style="{ padding: '5px' }"    >
                  <el-card class="box-card"  >
                    <template #header>
                      <div class="card-header">
                        <span>{{item.MsgTitle}}</span>
                      </div>
                    </template>
                    <div>
                      <div style="height: 100px;word-wrap: break-word;">{{item.MsgContent}}</div>
                      <div >来自:{{item.MsgSender}}  {{item.SendTime}}</div>
                    </div>

                  </el-card>
                </el-col>
              </el-row>
             </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="isH?24:10" style="display: none">
        <div>
          <el-card class="box-card">
            <div style="display: flex;justify-content: space-between;">
              <p>快捷入口</p>
              <div v-if="quickData.length!=6">
                <el-icon @click="quicksun--;"><ArrowLeft /></el-icon>
                <el-icon @click="quicksun++;"><ArrowRight /></el-icon>
              </div>
            </div>
            <div class="entrance">
                <el-row>
                  <el-col :span="12" v-for="(item,index) in quickFenData" :key="index" style="margin: 12px 0;cursor: pointer;" @click="clickPath(item)">
                    <div class="quicbody">
                      <div>
                        <i class="iconfont" :class="item.icon"></i>
                      </div>
                      <p class="quickTitle">{{item.title}}</p>
                    </div>
                  </el-col>
                </el-row>
            </div>
          </el-card>
          <el-alert v-if="!isH" style="margin-top:10px ;" title="学习贴士" type="warning" description="【待办事项】（左上角）：需要处理的可事情都会扣送给您，【公告文童】（右上角）：您可以查看最新发布的公告等信息，包含操作手册等。【预警信息】（右下角）：关键业务的预警损程信息。" />
        </div>
      </el-col>
      <el-col :span="24" style="margin-top:10px ;">
        <el-row :gutter="10">
          <el-col :span="8" v-for="item in form_count" :key="item.id" >
            <el-card class="box-card">
              <div class="summary">
                <div class="images cbul">
                    <i :class="item.icon" style="color:#fff;font-size: 36px;"></i>
                </div>
                <div>
                  <ul>
                    <li v-for="items in item.data" :key="items" :style="{'color':items.color}">{{items.name}}</li>
                  </ul>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import {defineComponent, onMounted,ref,reactive,toRefs,watch} from 'vue'
import {useStore} from '/@/store/index';
import {useRouter} from 'vue-router'
import {ArrowLeft, ArrowRight} from '@element-plus/icons-vue'
import {getHomeList} from "/@/api/system/home/index"
import {isMobile} from "/@/utils/other"
export default defineComponent({
  setup(props) {
    const store = useStore();
    const router =useRouter()
    const state = reactive({
      tasData:[],
      screenWidth: document.body.clientWidth,
      messages:[],
      isH:false,
      quickData:[],
      quickFenData:[],
      activeName:"wait",
      tasName:'second0',
      quicksun:null,
      sthsun:null,
      countlistData:[],
      wait_list:{},
      task:{wait:'待办事项',done:'已办事项',request:'我的请求',finish:'办结事宜',copy:'我的抄送',},
      wait_count:{
        list_data:[],
        total:0
      },
      form_count:[]
    })
    onMounted(()=>{
      window.onresize=()=>{
        return(()=>{
          window.screenWidth=document.body.clientWidth;
          state.screenWidth=window.screenWidth;
        })();}
    })
    watch(()=>{return state.quicksun},()=>{
      if(state.quickData){
        if(state.quicksun<0){
          state.quicksun=0
        }else if(state.quicksun>Math.floor(state.quickData.length/6)){
          state.quicksun=Math.floor(state.quickData.length/6)
        }
        let arr = []
        state.quickData.forEach((item,index)=>{
          if(state.quicksun*6<=index&&state.quicksun*6+6>index){
            arr.push(item)
            console.log(item);
          }
        })
        state.quickFenData=arr
      }
    })
    watch(()=>{return state.sthsun},()=>{
      if(state.isH){
        if(state.sthsun<0){
        state.sthsun=0
      }else if(state.sthsun>Math.floor(state.wait_count.list_data.length/6)){
        state.sthsun=Math.floor(state.wait_count.list_data.length/6)
      }
      }else{
        if(state.sthsun<0){
        state.sthsun=0
      }else if(state.sthsun>Math.floor(state.wait_count.list_data.length/9)){
        state.sthsun=Math.floor(state.wait_count.list_data.length/9)
      }
      }
      
      let arr = []
      if(state.isH){
        state.wait_count.list_data.forEach((item,index)=>{
        if(state.sthsun*6<=index&&state.sthsun*6+6>index){
          arr.push(item)
        }
      })
      }else{
        state.wait_count.list_data.forEach((item,index)=>{
        if(state.sthsun*9<=index&&state.sthsun*9+9>index){
          arr.push(item)
        }
      })
      }
      state.countlistData=arr
    })
    getHomeList().then((res)=>{
      if(res.code===0){
        state.tasData=res.data.form||-1
        state.quickData=res.data.quick_enter||[]
        state.wait_count=res.data.wait_count||{}
        state.wait_list=res.data.wait_list
        state.form_count=res.data.form_count
        state.messages=res.data.wait_list.messages
        state.quicksun=0
        state.sthsun=0
      }
    })
    // quickList().then((res)=>{
    //   console.log(res,"快捷");
    // })
    onMounted(() => {
      // if (store.state.userInfos.userInfos.deptStatus===0){
      //   router.push('/supplier/set')
      // }
      state.isH=isMobile()
    });
    const clickPath = (item)=>{
      if(item.path){
        router.push(item.path)
      }
    }
    const viewtask = (item)=>{

      router.push('/form/edit/' + item.TemplateCode+ "/" + item.RecordID)
    }
    return {
      ArrowLeft,ArrowRight,
      ...toRefs(state),
      clickPath,viewtask
    }
  }

})
</script>

<style scoped lang="scss">
.home-s{
  box-sizing: border-box;
  overflow: hidden;
}
.m-no{
    margin-bottom:0 !important;
  }
  .m-b10{
    margin-bottom: 10px;
  }
.STH{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fon-s12{
  font-size: 14px;
  font-weight: 700;
}
.STH-view{
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
}
.SV-total{
  width: 100px;
  height: 112px;
  background-color: rgb(26, 85, 149);
  color: #fff;
  text-align: center;
  padding: 20px 10px; 
  position: relative;
}
.total-title{
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 5px;
}
.SV-details{
  flex: 1;
  margin-left: 20px;
}
.SVD-d{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item-s{
  width: 28%;
  margin-left: 15px;
  margin-bottom: 18px;
}
.san{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgb(26, 85, 149);
  border-right: 10px solid transparent;
  position: absolute;
  right: -16px;
  top: 63px;
}
.type-l1 .el-card__body{
  height: 424px;
}
.list-left{
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.conclusion{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.conclusion .box-card{
  width: 33%;
  margin-bottom: 5px;
  padding: 10px;
}
.summary{
  display: flex;
  align-items: center;
}
.summary .images{
  width: 50px;
  height: 50px;
  border-radius: 5px;
  padding: 5px;margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.summary .images>img{
  width: 40px;
  height: 40px;
}
.quicbody{
  display: flex;
  align-content: center;
  .quickTitle{
    margin-left: 5px;
  }
}
.cbul{
  background-color: rgb(44, 154, 240);
}
.cbul2{
  background-color: rgb(80, 171, 85);
}
.cbul3{
  background-color: rgb(33, 194, 195);
}
.cbul4{
  background-color: rgb(100, 120, 151);
}
.cbul5{
  background-color: rgb(237, 80, 102);
}
.cbul6{
  background-color: rgb(233, 157, 69);
}
.entrance{
  height: 129px;
}
.w48{
  width: 40% !important;
}
</style>